<template>
  <div class="newsContainer">
    <div class="newsArea">
      <h1>News展示区</h1>
      <ul>
        <li v-for="item in newsList" :key="item.id">
          <button @click="showNewsDetail(item)">查看新闻-编程式路由</button>
          <!-- 第一种写法传递路由query参数 -->
          <!-- <RouterLink
            :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`"
            >{{ item.title }}</RouterLink> -->
          <!-- 第二种写法传递路由query参数;用对象形式传递 -->
          <!-- <router-link
            :to="{
              path: '/news/detail',
              query: { id: item.id, title: item.title, content: item.content },
            }"
            >{{ item.title }}</router-link
          > -->
          <!-- params第一种写法用params传递参数-传递字符串 -->
          <!-- <router-link
            :to="`/news/detail/${item.id}/${item.title}/${item.content}`"
            >{{ item.title }}</router-link
          > -->
          <!-- params第二种写法用params传递参数-传递对象 -->
          <router-link
            :to="{
              name: 'detail',
              params: { id: item.id, title: item.title, content: item.content },
            }"
            >{{ item.title }}</router-link
          >
        </li>
      </ul>
    </div>
    <div class="newsdetaiContent">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from "vue";
import { RouterView, RouterLink, useRouter } from "vue-router";
const newsList = reactive([
  { id: 1, title: "新闻1", content: "新闻1内容" },
  { id: 2, title: "新闻2", content: "新闻2内容" },
  { id: 3, title: "新闻3", content: "新闻3内容" },
  { id: 4, title: "新闻4", content: "新闻4内容" },
  { id: 5, title: "新闻5" },
]);

let router = useRouter();

interface NewsItem {
  id: number;
  title: string;
  content?: string;
}
function showNewsDetail(item: NewsItem) {
  router.push({
    name: "detail",
    params: { id: item.id, title: item.title, content: item.content },
  });
}
</script>

<style lang="scss" scoped>
.newsContainer {
  display: flex;
  width: 100%;
  .newsArea {
    width: 30%;
    ul {
      list-style: circle;
    }
    li {
      list-style: circle;
      text-align: center;
      border-bottom: 1px solid #ccc;
      padding: 8px;
      &::marker {
        color: green;
      }
      a {
        color: #000;
      }
    }
  }
  .newsdetaiContent {
    flex: 1;
    margin-left: 10%;
    margin-top: 2%;
  }
}
</style>
